<template>
  <view class="payment-container">
	     <view v-html="webViewUrl" v-if="showWebView" ></view>
    <!-- 加载支付表单的web-view -->
    <!-- <web-view :src="webViewUrl" @message="handleMessage"></web-view> -->
 
    <!-- 加载中提示 -->
    <view v-else-if="loading" class="loading">
      <text>正在加载支付页面...</text>
    </view>
    
    <!-- 错误提示 -->
    <view v-else-if="error" class="error">
      <text>{{ errorMessage }}</text>
      <button @click="retryPayment">重试</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// 状态管理
const showWebView = ref(false);
const loading = ref(true);
const error = ref(false);
const errorMessage = ref('');
const webViewUrl = ref('');

// 从父组件接收的tradeNO（支付表单HTML）
const props = defineProps({
  tradeNO: {
    type: String,
    required: true
  }
});

// 处理web-view消息回调（接收支付结果）
const handleMessage = (e) => {
  try {
    // 微信小程序中web-view消息需要从数组中获取
    const message = e.detail.data[0];
    console.log('接收web-view消息:', message);
    
    // 这里处理支付结果回调
    if (message && message.type === 'paymentResult') {
      // 支付成功或失败的处理
      if (message.success) {
        uni.showToast({
          title: '支付成功',
          icon: 'success'
        });
        // 通知父组件支付结果
        emit('paymentSuccess', message.data);
      } else {
        uni.showToast({
          title: '支付失败: ' + message.message,
          icon: 'fail'
        });
        emit('paymentFailed', message.message);
      }
      // 关闭web-view
      showWebView.value = false;
    }
  } catch (err) {
    console.error('处理web-view消息出错:', err);
    emit('error', '处理支付结果失败');
  }
};

// 重试支付
const retryPayment = () => {
  error.value = false;
  loading.value = true;
  initWebView();
};

// 初始化web-view
const initWebView = () => {
  try {
    // 创建临时HTML文件URL - 使用转义解决script标签问题
    const formHtml = `<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>支付中</title>
  </head>
  <body>
    ${props.tradeNO}
    <script>
      // 自动提交表单
      document.addEventListener('DOMContentLoaded', function() {
        const form = document.forms[0];
        if (form) {
          form.submit();
          
          // 监听支付结果并传递给小程序
          window.addEventListener('message', function(event) {
            // 这里可以根据支付宝的回调逻辑，判断支付状态并发送消息给小程序
            const isPaymentSuccess = event.data && event.data.includes('支付成功');
            window.parent.postMessage({
              type: 'paymentResult',
              success: isPaymentSuccess,
              message: isPaymentSuccess ? '支付成功' : '支付失败',
              data: event.data
            }, '*');
          });
          
          // 监听URL变化以检测支付结果
          const originalPushState = history.pushState;
          history.pushState = function() {
            originalPushState.apply(this, arguments);
            checkPaymentStatus();
          };
          
          const originalReplaceState = history.replaceState;
          history.replaceState = function() {
            originalReplaceState.apply(this, arguments);
            checkPaymentStatus();
          };
          
          window.addEventListener('popstate', checkPaymentStatus);
          
          function checkPaymentStatus() {
            // 根据URL或页面内容判断支付状态
            const isSuccess = window.location.href.includes('success') || document.body.innerText.includes('支付成功');
            const isFailed = window.location.href.includes('fail') || document.body.innerText.includes('支付失败');
            
            if (isSuccess || isFailed) {
              window.parent.postMessage({
                type: 'paymentResult',
                success: isSuccess,
                message: isSuccess ? '支付成功' : '支付失败',
                data: window.location.href
              }, '*');
            }
          }
        }
      });
    <` + `/script>
  </body>
</html>`;
    
    // 将HTML转换为Blob URL
	// 判断环境，避免在小程序中使用 Blo
	// // 你的 Blob 相关代码
	// const blob = new Blob(['some data'], { type: 'text/plain' });
	
    const blob = new Blob([formHtml], { type: 'text/html' });
    webViewUrl.value = URL.createObjectURL(blob);
    webViewUrl.value = formHtml;
    // 显示web-view
    showWebView.value = true;
    loading.value = false;
  } catch (err) {
    console.error('初始化web-view出错:', err);
    loading.value = false;
    error.value = true;
    errorMessage.value = '加载支付页面失败，请稍后重试';
    emit('error', '初始化支付页面失败');
  }
};

// 页面挂载时初始化
onMounted(() => {
  initWebView();
});

// 页面卸载时清理资源
onUnmounted(() => {
  // 释放Blob URL资源
  if (webViewUrl.value) {
    URL.revokeObjectURL(webViewUrl.value);
  }
});

// 定义自定义事件
const emit = defineEmits(['paymentSuccess', 'paymentFailed', 'error']);
</script>

<style scoped>
.payment-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.loading, .error {
  text-align: center;
  padding: 20rpx;
}
</style>